<template>
  <div id="introListPage">
    <router-view></router-view>
    <div style="background-color: white">
      <NewsListItem
        :new_item="item"
        :isLastItem="i == list.length - 1"
        v-for="(item, i) in list"
        type="intro"
      ></NewsListItem>
    </div>

    <div v-show="showErrorView" class="noOrder">
      <img :src="noOrder" />
      <div class="title">暂无简介~</div>
    </div>
  </div>
</template>

<script>
import NewsListItem from "@/views/home/components/news/NewsListItem";
import { api_homeintrolist } from "@/service/api/home";

export default {
  name: "IntroListPage",
  data() {
    return {
      noOrder: require("@/images/background/noOrder.png"),
      showErrorView: false,
      list: []
    };
  },
  components: {
    NewsListItem
  },
  methods: {
    onLoad() {
      api_homeintrolist()
        .then(res => {
          if (res.data) {
            var dataList = res.data;
            for (var i = 0; i < dataList.length; i++) {
              this.list.push(dataList[i]);
            }
          } else {
            this.showErrorView = true;
          }
        })
        .catch(error => {
          this.showErrorView = true;
          this.$toast(error.message);
        });
    }
  },
  created() {
    this.onLoad();
  }
};
</script>

<style scoped>
#introListPage {
  position: relative;
  top: 0;
  left: 0;
  /*right: 0;*/
  /*bottom: 0;*/
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  z-index: 200;
  overflow: auto;
}

#newCenter >>> .van-cell:not(:last-child)::after {
  border-bottom: 0px solid #ebedf0;
}

.noOrder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
img {
  width: 8.533333333333333rem;
  height: 8.533333333333333rem;
  margin-top: 10.8rem;
  margin-bottom: 1.4666666666666666rem;
}
.title {
  height: 1.5rem;
  font-size: 1rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.5rem;
}
</style>
